<template>
	<view class="container">
		<!-- 返回按钮 -->
		<view class="back-btn" @click="goBack()">
			<uni-icons type="left"></uni-icons>
		</view>
		<!-- header -->
		<view class="login-header">
			<view class="left-info" >
				<view class="info-name">{{userInfo.nickName}}</view>
				<view class="info-phone">手机号：{{userInfo.phonenumber}}</view>
			</view>
			<view class="right-avatar">
				<image v-if="userInfo.avatar" class="avatar-img" :src="baseUrl+userInfo.avatar" mode=""></image>
				<image v-else class="avatar-img" src="../../static/images/center/avatar_bg.png" mode=""></image>
			</view>
		</view>
		<!-- 菜单栏 -->
		<view class="menu-box">
			<view class="menu-list">
				<view class="menu-item" v-for="(item,index) in menuList.slice(0,4)" :key="item.title" @click="doMenu(index)">
					<view class="menu-left">
						<image class="menu-icon" :src="getImageUrl(item.icon)"/>
						<view class="menu-title">{{item.title}}</view>
					</view>
					<view class="menu-right">
						<image class="menu-arrow" :src="getImageUrl('right-arrow')"/>
					</view>
				</view>
			</view>
			<!-- 退出登录 -->
			<view class="menu-item logout" @click="doMenu(4)">
				<view class="menu-left">
					<image class="menu-icon" :src="getImageUrl(menuList[4].icon)"/>
					<view class="menu-title">{{menuList[4].title}}</view>
				</view>
				<view class="menu-right">
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive, toRefs, onMounted } from "vue"
import config from '@/config.js' // 配置文件
import {getUserProfile, logout} from "@/service/center.js"

// 懒加载图片
const getImageUrl = (name) => {
	return `../../static/images/center/${name}.png`;
};
const state = reactive({
	baseUrl:'',
	userInfo:{
		nickName:'暂未登录',
		phonenumber:'***********'
	},
	menuList:[
		{
			title:'个人信息',
			icon:'info',
			url:''
		},
		{
			title:'清除缓存',
			icon:'cache',
			url:''
		},
		{
			title:'关于我们',
			icon:'about',
			url:''
		},
		{
			title:'设置',
			icon:'setting',
			url:''
		},
		{
			title:'退出登录',
			icon:'logout',
			url:''
		}
	]
})
const {baseUrl,userInfo, menuList} = toRefs(state)
	
onMounted(() => {
	//生产环境
	// #ifdef APP
	state.baseUrl = config.base_url
	// #endif
	// 开发环境，代理
	// #ifndef APP
	state.baseUrl = '/dev-api'
	// #endif
	getUserInfo()
})

//获取用户信息
const getUserInfo = () => {
	getUserProfile().then(res => {
		console.log('info',res);
		state.userInfo = res.data
		let phone = state.userInfo.phonenumber
		phone = phone ? (phone.slice(0,4)+'****' + phone.slice(7)):'--'
		state.userInfo.phonenumber = phone
	})
}

//返回
const goBack = () => {
	uni.navigateBack()
}

//菜单操作
const doMenu = (index) => {
	switch (index){
		case 0:
			break;
		case 4:
			goOut()
			break;
	}
}

//退出登录
const goOut = () => {
	uni.showModal({
		title: '提示',
		content: '是否确定退出登录？',
		success: function (res) {
			if (res.confirm) {
				logout().then(res => {
					uni.removeStorageSync('mutations_token')
					uni.reLaunch({
						url:'/pages/login/index'
					})
				})
			} else if (res.cancel) {
				console.log('用户点击取消');
			}
		}
	});
}
</script>

<style lang="scss" scoped>
.container{
	box-sizing: border-box;
	width: 100%;
	height: 100vh;
	padding: 157rpx 24rpx 0;
	position: relative;
	background-color: #DAEBFF;
	.back-btn{
		position: absolute;
		left: 34rpx;
		top: 50rpx;
		:deep(.uni-icons){
			font-size: 32rpx !important;
			color: #020217;
			line-height: 32rpx;
		}
	}
	.login-header{
		box-sizing: border-box;
		width: 100%;
		height: 120rpx;
		padding: 0 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.left-info{
			.info-name{
				font-size: 40rpx;
				color: #000000;
				font-weight: bold;
				line-height: 40rpx;
				margin-bottom: 20rpx;
			}
			.info-phone{
				font-size: 26rpx;
				color: #777F96;
				line-height: 37rpx;
			}
		}
		.right-avatar{
			width: 120rpx;
			height: 120rpx;
			overflow: hidden;
			border-radius: 50%;
			.avatar-img{
				display: block;
				width: 100%;
				height: 100%;
			}
		}
	}
	.menu-box{
		width: 100%;
		margin-top: 74rpx;
		.menu-list{
			box-sizing: border-box;
			width: 100%;
			padding: 0 32rpx 0;
			border-radius: 16rpx;
			background-color: #fff;
		}
		.menu-item{
			width: 100%;
			height: 88rpx;
			border-bottom: 1rpx solid #E6E8EF;
			display: flex;
			justify-content: space-between;
			align-items: center;
			&:last-child{
				border: none;
			}
			.menu-left{
				display: flex;
				align-items: center;
				.menu-icon{
					display: block;
					width: 38rpx;
					height: 38rpx;
					margin-right: 17rpx;
				}
				.menu-title{
					font-size: 26rpx;
					color: #000000;
				}
			}
			.menu-right{
				.menu-arrow{
					display: block;
					width: 28rpx;
					height: 28rpx;
				}
			}
		}
		.logout{
			box-sizing: border-box;
			padding: 0 32rpx 0;
			background-color: #fff;
			border-radius: 16rpx;
			margin-top: 28rpx;
		}
	}
}
</style>

